<template>
  <uni-popup ref="spec" type="bottom" :maskClick="true" class="popup">
    <view class="wrap" @tap.stop.prevent @touchmove.stop.prevent>
      <view class="flex justify-between">
        <view class="margin-right">
          <image
            class="block-150 radius bg-gray"
            mode="aspectFill"
            :src="thumb"
            @click="preview(thumb)"
          ></image>
        </view>
        <view class="flex-sub flex flex-direction justify-end">
          <view class="text-theme text-bold">
            <text class="text-price">{{ price }}</text>
          </view>
          <view class="text-sm text-999 margin-top-xs">库存 {{ stock }}</view>
          <view
            style="height: 80rpx"
            class="text-df text-666 margin-top-xs text-cut-2"
          >
            <text v-if="skuName">已选择: {{ skuName }}</text>
          </view>
        </view>
        <view class="close-box">
          <text class="cuIcon-close" @tap="close"></text>
        </view>
      </view>
      <scroll-view class="speclist-max-height" scroll-y="true" @touchmove.stop>
        <view class="margin-top" v-if="speclist.length > 0">
          <block v-for="(item, index) in speclist" :key="index">
            <view>
              <view class="text-sm text-333 text-bold padding-bottom-sm">{{
                item.name
              }}</view>
              <view class="item">
                <template v-for="(item2, index2) in item.spec_value">
                  <template v-if="isDisable(index, item2.id)">
                    <view
                      :key="index2"
                      class="item-tag"
                      :class="{ active: selectSkuId[index] == item2.id }"
                      @tap="selectSpec(index, item2)"
                    >
                      {{ item2.item }}
                    </view>
                  </template>
                  <template v-else>
                    <view :key="index2" class="item-tag disable">
                      {{ item2.item }}
                    </view>
                  </template>
                </template>
              </view>
            </view>
          </block>
        </view>
      </scroll-view>
      <view class="margin-top">
        <view class="flex justify-between align-center padding-tb-sm">
          <view class="text-333 text-sm text-bold">数量</view>
          <uni-number-box
            v-if="limit"
            :value="number"
            :min="1"
            :max="Number(limit)"
            @change="setnumber"
            :step="1"
          ></uni-number-box>
          <uni-number-box
            v-else
            :value="number"
            :min="1"
            :max="Number(stock)"
            @change="setnumber"
            :step="1"
          ></uni-number-box>
        </view>
        <view class="text-right text-theme text-sm" v-if="limit > 0"
          >此商品限购{{ limit }}件</view
        >
      </view>
      <view class="margin-top flex round overHidden">
        <view
          v-if="type == 'all' || type == 'cart'"
          class="flex-sub btn color1"
          @tap.stop="handleSubmit('addCart')"
          >加入购物车</view
        >
        <view
          v-if="type == 'all' || type == 'buy'"
          class="flex-sub btn color2"
          @tap.stop="handleSubmit('buyNow')"
          ><text>立即抢购</text></view
        >
        <view
          v-if="type == 'confirm'"
          class="flex-sub btn color2"
          @tap.stop="handleSubmit('confirm')"
        >
          <text>确认</text>
        </view>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  name: "benben-specs-popup",
  props: {
    // spu规格列表
    speclist: {
      type: Array,
      default: () => [],
    },
    // sku列表
    skulist: {
      type: [Array, Object],
      default: () => [],
    },
    limit: {
      type: Number,
      default: 0,
    },
    //选中的规格
    skuId: {
      type: [String, Number],
      default: 0,
    },
    skuName: {
      type: [String, Number],
      default: 0,
    },
    price: {
      type: [String, Number],
      default: 0,
    },
    marketPrice: {
      type: [String, Number],
      default: 0,
    },
    memberPrice: {
      type: [String, Number],
      default: 0,
    },
    stock: {
      type: [String, Number],
      default: 0,
    },
    number: {
      type: [String, Number],
      default: 1,
    },
    thumb: {
      type: [String],
      default: "",
    },
  },
  data() {
    return {
      selectSkuId: [],
      selectSkuName: [],
      type: "",
      flag: false,
    };
  },
  computed: {
    skulistArr() {
      let skulistArr = [];
      Object.values(this.skulist).map((item) => {
        skulistArr.push(item.key.split("_"));
      });
      return skulistArr;
    },
  },
  watch: {
    skulist: {
      //监听规格改变
      handler(value) {
        this.init();
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 初始化
    init() {
      let skuGoods = Object.values(this.skulist).find(
        (item) => item.sku_id == this.skuId
      );
      if (skuGoods) {
        this.selectSkuId = skuGoods.key.split("_");
      } else {
        this.selectSkuId = new Array(this.speclist.length);
      }
      this.selectSkuId.map((item, index) => {
        if (!item) return;
        let is_upload_image = this.speclist[index].is_upload_image || "0";
        if (is_upload_image == "0") return;
        let selectItem = this.speclist[index].spec_value.find(
          (val) => val.id == item
        );
        this.$emit("update:thumb", selectItem.thumb);
      });
      this.getSelectSkuName();
      this.selectGoods();
    },
    getSelectSkuName() {
      let selectSkuName = new Array(this.speclist.length);
      this.selectSkuId.map((item, i) => {
        if (!item) return;
        let specitem = this.speclist[i].spec_value.find(
          (val) => val.id == item
        );
        selectSkuName[i] = (specitem && specitem.item) || "";
      });
      selectSkuName = selectSkuName.filter((item) => item);
      this.$emit("update:sku-name", selectSkuName.join(","));
    },
    // 判断是否禁用
    isDisable(index, id) {
      let isSelecArr = [];
      this.selectSkuId.map((item, i) => {
        if (i !== index && item) {
          isSelecArr.push({
            index: i,
            id: item,
          });
        }
      });
      if (!isSelecArr.length) return true;
      let skulistArr = this.skulistArr.filter((item) => {
        let isSelec = isSelecArr.every((selecitem) => {
          return item[selecitem.index] == selecitem.id;
        });
        return isSelec && item[index] == id;
      });
      return skulistArr.length;
    },
    // 点击添加购物车
    handleSubmit(type) {
      let emptyIndex = this.selectSkuId.findIndex((item) => !item);
      //判断多规格商品是否选择了规格
      if (this.selectSkuId.length && emptyIndex != -1)
        return this.$message.info(`请选择${this.speclist[emptyIndex].name}`);
      if (this.stock <= 0) return this.$message.info(`暂无库存`);
      this.$emit(type);
    },
    // 数量改变
    setnumber(e) {
      this.$emit("update:number", e);
    },
    // 点击规格
    selectSpec(index, item) {
      let is_upload_image = this.speclist[index].is_upload_image || "0";
      if (this.selectSkuId[index] == item.id) {
        this.$set(this.selectSkuId, index, "");
      } else {
        this.$set(this.selectSkuId, index, item.id);
      }
      if (is_upload_image == "1") {
        this.$emit("update:thumb", item.thumb);
      }
      this.getSelectSkuName();
      this.selectGoods();
    },
    // 获取选中商品的信息
    selectGoods() {
      let selectSkuId = this.selectSkuId.filter((item) => item);
      if (selectSkuId.length !== Object.keys(this.speclist).length) return;
      selectSkuId = selectSkuId.join("_");
      let skuGoods = Object.values(this.skulist).find(
        (item) => item.key == selectSkuId
      );
      if (skuGoods) {
        this.$emit("update:market-price", skuGoods.market_price);
        this.$emit("update:member-price", skuGoods.member_price);
        this.$emit("update:price", skuGoods.shop_price);
        this.$emit("update:stock", skuGoods.stock);
        if (+skuGoods.stock < +this.number) {
          this.$emit("update:number", skuGoods.stock);
        }
        this.$emit("update:sku-id", skuGoods.sku_id);
        if (skuGoods.thumb) {
          this.$emit("update:thumb", skuGoods.thumb);
        }
      }
    },
    // 打开弹窗
    open(type) {
      this.type = type || "all";
      this.init();
      this.$refs.spec.open();
    },
    // 关闭弹窗
    close() {
      this.$refs.spec.close();
    },
    // 规格预览图片
    preview(urls) {
      uni.previewImage({
        current: urls,
        urls: [urls],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.wrap {
  padding-bottom: 0;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);

  .close-box {
    width: 40rpx;
    height: 40rpx;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999999;
    font-size: 28rpx;
    font-weight: bold;
  }

  .item {
    display: flex;
    flex-wrap: wrap;

    .item-tag {
      display: inline-block;
      font-size: 24rpx;
      color: #333;
      background-color: #f5f5f5;
      padding: 12rpx 24rpx;
      border-radius: 100rpx;
      margin-right: 20rpx;
      margin-bottom: 20rpx;
      border: 2rpx solid #f5f5f5;
    }

    .item-tag.active {
      background-color: #fff2ef;
      color: $theme;
      border-color: $theme;
    }

    .item-tag.disable {
      color: #cccccc !important;
    }
  }

  .btn {
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    color: #ffffff;
  }
}

.block-150 {
  width: 150rpx;
  height: 150rpx;
  min-width: 150rpx;
  min-height: 150rpx;
}
.color1 {
  background-color: #feb14d;
}
.color2 {
  background: $bgtheme;
}

.overHidden {
  overflow: hidden;
}

::v-deep .popup .uni-popup__wrapper-box {
  max-height: 100% !important;
}

.speclist-max-height {
  // #ifndef MP-WEIXIN
  max-height: 800rpx;
  // #endif
  // #ifdef MP-WEIXIN
  max-height: 650rpx;
  // #endif
}
</style>
